웹 크롤링
세 갈래의 길

오늘의 순서

오늘 만드는 파일

누가 누구에게 — 컴퓨터 사이의 자리

무엇을 주고받는가 — 방식과 형식

코드를 다루는 말

글자와 도구

웹페이지에 관한 말

오늘 쓰는 도구에 관한 말

브라우저가 하는 네 가지 일

주소 하나에 담긴 것

https://search.naver.com/search.naver?where=news&query=올림픽&sort=1

• 물음표 뒤가 질문지. query=올림픽을 query=총선으로 바꾸면 다른 결과가 옴
• 즉 조건을 주소로 표현할 수 있고, 그래서 사람이 클릭하지 않아도 조건만 바꿔 가며 반복할 수 있음
• 한글은 주소에 그대로 못 들어가므로 %EC%98%AC… 형태로 바뀜. 이것을 URL 인코딩이라 함

집짓기에 빗대면 HTML은 골조, CSS는 마감과 도색, JavaScript는 문과 조명 같은 설비. 골조만 있어도 집의 구조는 알 수 있고, 도색이 없다고 방의 개수가 달라지지는 않음. 우리가 오늘 가져오려는 것은 방의 개수와 이름, 즉 HTML이 담고 있는 내용.

태그와 요소 — 한 줄을 해부해 봄

요소 안에 요소가 들어감

<div>                        ← 바깥 상자
    <h2>오늘의 뉴스</h2>      ← 그 안의 제목
    <p>첫 번째 기사입니다.</p>  ← 그 안의 문단
</div>

서랍장 안에 서랍이 있고 서랍 안에 물건이 있는 것과 같음. 이렇게 겹겹이 들어간 구조를 중첩이라 부름. 웹페이지는 예외 없이 이 모양이고, 깊은 곳은 열 겹이 넘기도 함. 2부에서는 이 중첩을 타고 내려가게 됨.

div와 span의 차이

<div>첫 번째 상자</div>
<div>두 번째 상자</div>
→ 위아래로 쌓임

오늘 순위는 <span>1위</span>임
→ 한 줄 안에 그대로 있음

속성 — 태그에 붙는 부가 정보

태그 이름만으로는 부족할 때가 있음. 링크라면 어디로 가는지, 이미지라면 어느 파일인지를 알려 줘야 함. 그 정보를 속성이라 하고 이름="값" 꼴로 시작 태그 안에 씀.

HTML만으로 만든 페이지는 검은 글씨가 흰 배경에 줄줄이 놓인 모습. 여기에 색을 주고 글자 크기를 정하고 여백을 넣고 좌우로 나란히 배치하는 일을 CSS가 함. 표현(CSS)과 구조(HTML)를 갈라 놓았기 때문에 디자인을 바꿔도 내용은 그대로 둘 수 있음.

CSS 한 덩어리의 구조

읽는 법은 이러함 — «모든 a 태그에 대해, 글자색은 파랑으로, 글자 크기는 16픽셀로 하라.» 선택자가 대상이고 선언부가 지시 내용.

네 부분을 나눠 보면

대상을 지목하는 세 가지 방법

디자이너 입장에서 생각해 보면 이유가 분명해짐. «제목은 크게, 날짜는 회색으로»라고 하려면 어디가 제목이고 어디가 날짜인지 먼저 구분돼 있어야 함. 그래서 웹페이지를 만들 때 요소마다 class="title", class="date" 같은 이름표를 미리 붙여 둠. 이름표는 디자인을 위해 붙인 것이지만, 결과적으로 페이지의 모든 부분에 이름이 생긴 셈이 됨.

실제 페이지에서는 이렇게 생겼음

<ul id="yesBestList">                  ← 이 영역은 페이지에 하나뿐임 → id
    <li>
        <div class="itemUnit">         ← 책 1권. 같은 모양이 반복됨 → class
            <a class="gd_name">책 제목</a>
            <span class="info_auth">지은이</span>
        </div>
    </li>
    <li> … </li>                        ← 같은 이름표가 24번 반복
</ul>

• 바깥 상자에는 id가 붙음 — 베스트셀러 목록 영역은 이 페이지에 하나뿐이기 때문임. Ctrl+U로 yesBestList 를 검색하면 실제로 있음
• 안쪽 반복 단위에는 class가 붙음 — 책 24권이 전부 같은 이름표를 나눠 가짐
• 이 구분은 관례이지 강제는 아니나, 실제 웹사이트 대부분이 이 방식을 따름

크롤링과 스크래핑 — 자주 섞어 쓰는 두 말

오늘의 한 사이클 — 네 단계

같은 문법, 다른 목적

.gd_name { font-weight: bold; }

soup.select('.gd_name')

지목하는 문법 .gd_name은 완전히 같음. 달라지는 것은 그다음에 무엇을 하느냐뿐. 그래서 새로 외울 문법이 거의 없음.

선택자 문법 — 이것만 알면 대부분 해결됨

두 가지 표기법 — 같은 일을 하는 두 방식

반복되는 덩어리를 훑는 기본형

목록형 페이지는 거의 예외 없이 같은 모양의 덩어리가 반복됨. 그 덩어리를 전부 찾아 하나씩 돌면서 그 안에서 값을 꺼내는 것 — 이것이 크롤링 코드의 기본 골격이고, 오늘 나오는 코드는 전부 이 변형.

# ① 반복되는 덩어리를 전부 찾음
books = soup.find_all('div', class_='itemUnit')

# ② 하나씩 돌면서
for book in books:
    # ③ 그 덩어리 «안에서» 제목만 꺼냄
    title = book.find('a', class_='gd_name').text
    print(title)

import requests
html = requests.get(URL)
print(html)          # → <Response [200]>
print(html.text)     # → 받아 온 HTML 전체(글자 뭉치)

상태코드 — 서버가 붙여 보내는 처리 결과

헤더 — 나를 소개하는 쪽지

요청에 함께 붙여 보내는 부가 정보. 서버는 이것을 보고 요청을 받아 줄지 판단하기도 함.

headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) …",  # 어떤 브라우저인지
    "Referer": "https://www.melon.com/chart/"                        # 어느 페이지에서 왔는지
}
res = requests.get(url, headers=headers)

• User-Agent — 없으면 파이썬임이 드러나고, 일부 사이트는 그것만으로 거절함
• Referer — «정상 페이지에서 넘어온 요청»임을 알림. 사이트에 따라 이것을 봄
• 헤더를 붙이는 것은 속임수가 아니라 브라우저와 같은 조건으로 요청하는 것

GET과 POST · 한글이 깨질 때

res.encoding = "utf-8"

여는 법은 F12 또는 Ctrl+Shift+I(Mac은 ⌘+⌥+I)임. 탭이 여럿이지만 오늘 쓰는 것은 두 개뿐.

오늘 하는 판단은 세 갈래뿐

준비 — 저장할 자리를 먼저 만듦

from google.colab import drive
drive.mount('/content/drive')
import os
from datetime import datetime
SAVE_DIR = '/content/drive/MyDrive/mypython'
os.makedirs(SAVE_DIR, exist_ok=True)      # 없으면 FileNotFoundError
TODAY = datetime.now().strftime('%y%m%d')   # 파일 이름에 붙일 수집 날짜

A-1 · Yes24 — 코드가 하는 일은 네 가지뿐

A-2 · 멜론 — 이름표를 여러 겹 따라 내려가기

Yes24는 이름표 하나로 값을 꺼냈음. 멜론은 한 겹 더 들어가야 함. 곡 하나의 정보가 여러 상자에 나뉘어 담겨 있기 때문.

<tr class="lst50">                         ← 곡 1개 = 행 하나
    <span class="rank">1</span>          ← 순위
    <div class="wrap_song_info">         ← 곡 정보를 담은 바깥 상자
        <div class="rank01"><a>곡명</a></div>
        <div class="rank02"><a>아티스트</a></div>
        <div class="rank03"><a>앨범</a></div>
    </div>
</tr>

곡명을 꺼내려면 세 번을 타고 내려가야 함 — wrap_song_info 상자로 들어가서 → rank01 칸을 찾고 → 그 안의 a 태그. 이것을 한 줄로 쓴 것이 아래.

A-2 · 코드로 옮기면

rows = soup.select("tr.lst50, tr.lst100")      # 행 100개를 전부 찾음

for row in rows:                          # 한 행씩 돌면서
    rank  = row.select_one("span.rank").get_text(strip=True)
    title = row.select_one("div.wrap_song_info div.rank01 a").get_text(strip=True)
    …

• select는 여러 개, select_one은 하나 — 행은 여러 개라 select, 한 행 안의 곡명은 하나라 select_one
• row.select_one(...)처럼 행 안에서 찾는 것이 중요. soup에서 찾으면 100곡이 뒤섞임.
• get_text(strip=True)는 앞뒤 공백을 떼고 글자만 꺼내는 것
• 헤더 없이 부르면 406으로 거절당함 — 12절에서 본 그 헤더. 실습 코드는 UA와 Referer를 함께 붙임

브라우저는 «두 번» 일하고, 파이썬은 «한 번»만 함

그래서 세 갈래로 갈림

주소가 다르면 코드도 다름 — 오늘 실습의 실제 주소

코드는 이렇게 갈림

r = requests.get("화면 주소")
soup = BeautifulSoup(r.text, …)
soup.select("div.itemUnit")

r = requests.post("진짜 주소", json=조건)
r.json()["movieList"]

B-1 · 메가박스 — 판별부터 해 봄

먼저 megabox.co.kr/movie를 그대로 받아 영화 제목이 한 건도 없음을 직접 확인함.

# ① 화면에 보이는 그 주소 — 목록이 없음
r = requests.get("https://www.megabox.co.kr/movie")
print(len(r.text))                   # 100,473 자 — 뭔가 잔뜩 왔는데
print("movie-list-info" in r.text)   # False — 목록은 없음

# ② 개발자도구에서 찾은 «진짜 배달 주소»
r = requests.get("https://www.megabox.co.kr/on/oh/oha/Movie/selectMovieList.do",
                 params={"currentPage": 1, "recordCountPerPage": 20},
                 headers=headers)
for m in r.json()["movieList"]:
    print(m["movieNm"], m["boxoBokdRt"])   # 제목, 예매율

B-2 · KOBIS — 응답이 JSON이 아니라 «표»인 경우

같은 ② 갈래인데 돌아오는 형태가 다름. 메가박스는 JSON을 주고 KOBIS는 HTML 표를 통째로 줌. 그래도 하는 일은 같음.

res = requests.post(url, data=조건, headers=headers)
res.encoding = "utf-8"                          # 한글이 깨질 때
df = pd.read_html(StringIO(res.text))[0]              # 표를 통째로 읽음

그래서 함수를 미리 만들어 둠

• 노트북의 수집 함수는 120줄 남짓. 읽으라고 준 것이 아님
• 바꾸는 것은 검색어 · 언론사 · 시작일 · 종료일 · 정렬 · 페이지 수 여섯 줄
• 이 함수가 오늘 돌아간다는 것은 오늘 기준으로 손봐 두었다는 뜻

query     = '올림픽'      # ← 검색어
media     = 'YTN'         # ← 언론사
date_from = 20260820        # ← 시작일
…
pages     = 3               # ← 10건 × 3페이지 = 최대 30건

무엇을 AI에게 맡기나

준비 — 3일차에서 세팅한 그대로

① 먼저 — 코랩에서 한 것을 그대로 시켜 봄

같은 결과가 나오는지 확인하는 것이 목적. 코랩에서 사람이 찾아 넣은 선택자를 AI가 스스로 찾아내는지 봄. 다섯 곳 전부에 대한 프롬프트가 배포 TXT에 들어 있음.

② ★ 아무 사이트나 되는 프롬프트 — 빈칸 셋만 채움

사이트마다 프롬프트를 새로 만들 필요가 없음. 아래 하나면 됨. 나머지 조건은 [0-1]에 이미 깔려 있으니 < > 안만 바꿔 씀.

③ 브라우저 자동화 — 코랩이 못 하는 것

• 클릭·스크롤을 해야 값이 나오는 페이지는 코랩에서 못 함 — 화면이 없기 때문. 바이브 코딩에서는 창이 실제로 열림
• 창이 열리는 것을 보는 것이 목적. 한 번 보면 브라우저 자동화가 무엇인지 이해됨
• 처음에 실패해도 그대로 둘 것 — AI가 에러를 읽고 다시 시도하는 과정이 볼거리

import time
time.sleep(1)

수집보다 재배포가 문제

• 저작권 — 기사 본문은 저작물. 연구·학습을 위해 모아서 분석하는 것과, 그대로 다시 퍼뜨리는 것은 전혀 다른 문제
• 개인정보 — 댓글·작성자 정보에는 개인정보가 섞여 있음. 필요 없으면 처음부터 수집하지 않는 것이 안전함
• 연구 윤리 — 논문에 쓸 자료라면 수집 시점·조건·건수를 기록해 둠. 나중에 재현할 수 없으면 자료로 쓸 수 없음
• 로그인 영역 — 계정으로 들어가야 보이는 것은 이용약관 위반이 되기 쉬움. 오늘 다루지 않는 이유